<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-31 09:50:36
 * @LastEditors: guandeshen 295570679@qq.com
 * @LastEditTime: 2024-08-31 11:03:23
 * @FilePath: /task-admin/src/views/changePassword/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="container">
    <div class="bg-[#fff] border-rd-8px box-border px-24px py-32px">
      <div
        class="flex justify-between items-center w-[100%] pb-16px border-b-[1px] border-solid border-[#ebedf0] mb-16px"
      >
        <span class="custom-title flex-1">
          {{ $t("route.changePassword") }}
        </span>
      </div>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="auto"
        style="max-width: 560px"
      >
        <el-form-item :label="$t('common.originalPassword')" prop="old_pwd">
          <el-input
            v-model="formData.old_pwd"
            :placeholder="$t('common.pleaseEnter')"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('common.newPassword')" prop="new_pwd">
          <el-input
            v-model="formData.new_pwd"
            :placeholder="$t('common.pleaseEnter')"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('common.confirmPassword')" prop="new_pwd_conf">
          <el-input
            v-model="formData.new_pwd_conf"
            :placeholder="$t('common.pleaseEnter')"
            type="password"
          />
        </el-form-item>

        <div class="border-b-[1px] border-solid border-[#ebedf0] mb-16px"></div>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit(formRef)">{{
            $t("common.save")
          }}</el-button>
          <el-button @click="resetForm(formRef)">{{
            $t("common.cancel")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import UserAPI from "@/api/user";
import { UserChgpwdQuery } from "@/api/user/model";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
const { t } = useI18n();
const rules = reactive({
  // name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  // code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
  // dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
  // status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});
const formData = reactive<UserChgpwdQuery>({
  old_pwd: "",
  new_pwd: "",
  new_pwd_conf: "",
});

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const formRef = ref<FormInstance>();

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      UserAPI.chgpwd(formData)
        .then(() => {
          ElMessage.success(t("common.modifiedSuccessfully"));
          formEl.resetFields();
        })
        .finally(() => {});
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.custom-title {
  display: flex;
  align-items: center;
  color: #323233;
  font-family: "PingFang SC";
  font-size: 16px;
  font-weight: 900;
  text-transform: capitalize;
  &::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 22px;
    margin-right: 8px;
    background: #4e6bef;
  }
}
</style>
